<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="preview/css/reset.css" />
		<script src="preview/js/jquery.min.js"></script>
		<script src="preview/js/rem.js"></script>
		<script src="preview/js/browser.js"></script>
		<script src="preview/js/requestAnimationFrame.js"></script>
		<script src="preview/js/prefixfree.min.js"></script>
		<script src="preview/js/baseProtocol.js"></script>
		<title>大数据单模块-通知公告</title>
		<style>
			.notice {
				width: 5.86rem;
				height: 4.21rem;
			}
			
			.notice-content {
				position: relative;
				width: 100%;
				height: 3.6rem;
				background: url(preview/img/notice_text.png);
				background-size: 100% 100%;
				padding: .27rem .22rem .22rem;
				/*background-image: linear-gradient(0deg, rgba(13, 26, 57, 0.7) 0%, rgba(27, 47, 91, 0.7) 36%, rgba(41, 67, 125, 0.7) 84%);*/
				/*box-shadow: 0rem 0.03rem 0.07rem 0rem rgba(0, 0, 0, 0.38);*/
				/*border: solid 0.01rem rgba(72, 77, 91, 0.28);*/
			}
			/*由于通知标题的背景图片上下左右尺寸不对应所以设置的样式都不对称*/
			
			.notice_title {
				position: absolute;
				width: 2.99rem;
				height: 0.56rem;
				line-height: 0.5rem;
				text-align: center;
				background: url(preview/img/notice_title.png);
				background-size: 100% 100%;
				top: -0.3rem;
				left: 52%;
				-webkit-transform: translateX(-50%);
				-moz-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
				-o-transform: translateX(-50%);
				transform: translateX(-50%);
				padding: 0 0.16rem 0 0.22rem;
			}
			/*设置文字外面的盒子制造出四面间距的效果*/
			
			.notice_text {
				width: 100%;
				height: 100%;
				position: relative;
				overflow: hidden;
			}
			
			.notice_text>div {
				position: absolute;
				width: 100%;
				left: 0;
				top: 0;
				-webkit-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
				will-change: -webkit-transform,transform;
				-webkit-transition: transform 5s linear ;
				transition: transform 5s linear ;
				z-index: 99999;
				-webkit-font-smoothing: subpixel-antialiased;
				line-height: 1.4;
			}
			
			.notice_text p {
				text-indent: 0.36rem;
				text-align: justify;
				-webkit-font-smoothing: subpixel-antialiased;
			}
			
			.notice {
				cursor: pointer;
				position: relative;
			}
		</style>
	</head>

	<body>
		<div class="notice starModule">
			<div class="module-title ycenterbox"><img src="preview/img/listimg.png" /><span class="section_name" data-key="today_recom_str">通知</span></div>
			<div class="notice-content">
				<div class="notice_title words1"></div>
				<div class="notice_text"></div>
			</div>
		</div>
	</body>
	<script>
		var txt_index = -1,
			div_height = null,
			div_parent = null,
			scrollTime = 0,
			arr_con = [],
			arr_title = [],
			notice_time = null,
			hSpaceTime=12,
			hHZ=myexplorer(),
			waitCountNum=0;
		window.onload= function() {
			getRem(100, 586);
		};
		window.onresize = function() {
			getRem(100, 586);
			notice();
			var websocket_notice,
			//最大重连次数
					max_try_num_notice = 10,
					curr_try_num_notice = 0;

			function notice() {
				curr_try_num_notice++;
				try {
					websocket_notice = new WebSocket(ws_url_notice); //参数是服务器地址，还有一个参数是自协议可以不写
					websocket_notice.onopen = function(res) {
						console.log('info ---->> 通知公告连接成功...');
						curr_try_num_notice = 0;
					};
					websocket_notice.onmessage = function(msg) {
						var json = JSON.parse(msg.data);
						var data = json.data;
						if(data == null || data == undefined || data.length == 0) {
							console.log("warning ---->> 通知公告无数据返回...");
							return;
						}
						console.log('info ---->> 通知公告数据更新了...');
						txt_index = 0; ///每次推数据时候让索引从0开始
						var str = ""; ///拼接字符串
						arr_con = []; ///每次清空数组
						$(".notice_inner").html(" "); ///每次进来将通知内容节点都清空
						arr_title = [];
						$.each(data, function(i, e) {
							///每个e就是一个对象
							arr_title.push(e.f_title); ///将所有的标题存到数组中
							str = '<div>' + e.f_content + '</div>';
							arr_con.push(str); ///将通知内容放到数组中
						});
						notice_move();

					};
					websocket_notice.onclose = function(e) {
						if(curr_try_num_notice <= max_try_num_notice) {
							console.log("warning ---->> 通知公告连接关闭，6秒后重新连接...");
							setTimeout(function() {
								notice();
							}, 6000);
						} else {
							console.log("warning ---->> 通知公告连接超过最大重连次数，不再重连...");
						}
					};
					websocket_notice.onerror = function() {
						console.log("error ---->> 通知公告连接发生错误...");
					};
				} catch(e) {
					console.log("error ---->> 通知公告连接发生错误...");
				}
			}
		}
		function notice_move() {
			if(!!window.notice_time)	cancelAnimationFrame(window.notice_time);
			txt_index++;
			if(txt_index == arr_con.length) txt_index = 0;
			$(".notice_text").html(arr_con[txt_index]);
			$('.notice_title').html(arr_title[txt_index]); //赋值当前通知的标题
			div_height = $('.notice_text>div').height(); ///当前显示通知的盒子的高度
			div_parent = $('.notice_text').height(); ////父盒子高度
			//大于父容器高度让div滚动
			if(div_height > div_parent) {
				//滚动时间
				scrollTime = div_height / 10 + "s";
				//设置滚动时间
				$('.notice_text>div').css({
					"-webkit-transition-duration" : scrollTime,
					"transition-duration" : scrollTime
				});
				$('.notice_text>div').css({
					"-webkit-transform" : "translate3d(0,"+ (-div_height) +"px,0)",
					"transform" : "translate3d(0,"+ (-div_height) +"px,0)",
				});
				//滚动结束txt_index+1	重置位置 播放下一条
				$('.notice_text>div').on("-webkit-transitionend transitionend",function(){
					$(this).css("transform","translate3d(0,0,30)")
					notice_move();
				})
			//小于||等于父容器高度时 等待10s再跳下一轮
			}else{
				waitTime();
			}
			
		}
		function waitTime(){
			if(!!window.notice_time)	cancelAnimationFrame(window.notice_time);
			waitCountNum++;
			if(waitCountNum >= (hSpaceTime*hHZ)){//不需要滚动的内容等待10秒钟
				waitCountNum = 0;
				notice_move();
			}else {
				window.notice_time = requestAnimationFrame(waitTime);
			}
		}
	</script>

</html>